<template>
	<view class="container">
		<view v-if="vendorCourse" class="title">{{vendorCourse.title}}</view>
		<view v-if="vendorCourse" class="desc">
			<view class="sub">课堂编号：{{vendorCourse.indexInPackage}}</view>
			<view class="sub">月龄：{{vendorCourse.dimensions||''}}</view>
		</view>
		<view class="desc" v-if="vendorCourse">
			<view v-for="(sub, subIndex) in vendorCourse.detailsList" class="sub">
				{{sub.label}}:{{sub.value}}
			</view>
		</view>
		
		<view style="margin-bottom: 80rpx;">
			<view class="item" v-for="(item, index) in courseContent" :key="index" @click="itemClick(item)">
				<u-section 
					:title="item.title" 
					:line-color="appTheme.checkColor"
					font-size="36"/>
			</view>
		</view>

		
		<view class="categoryType">
			<u-button type="info" size="mini" @click="detailHandle(1)">全书同详情</u-button>
			<u-button type="info" size="mini" @click="detailHandle(2)">全月同详情</u-button>
			<u-button type="info" size="mini" @click="detailHandle(3)">全周同详情</u-button>
		</view>
		
		<u-popup v-model="show" mode="bottom" height="80%">
			<view class="popup-content">
				<u-section
					:title="title" 
					:line-color="appTheme.checkColor"
					font-size="36">
					<view slot="right"></view>
				</u-section>
				<view class="content">
					<joMarkdown :nodes="content"></joMarkdown>
				</view>
					<u-time-line>
						<u-time-line-item v-for="(subItem, subIndex) in item.contentList">
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{subItem.title}}</view>
									<joMarkdown :nodes="formatMarkdown(subItem.content)"></joMarkdown>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
					<view class="tool">
						<u-grid :col="3" :border="false">
							<u-grid-item v-for="(toolItem, subIndex) in item.toolList" :custom-style="customStyle">
								<view class="tool-item" @click="toolClick(toolItem)">
									<u-icon v-if="toolItem.type === 'radio'" name="volume" size="60"></u-icon>
									<u-image v-else class="cover" height="100rpx" width="100rpx" :src="toolItem.cover"></u-image>
									<view class="tool-title">{{toolItem.title}}</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
			</view>
		</u-popup>
		
		<u-popup v-model="audioShow" mode="bottom" @close="audioClose">
			<view style="padding: 30rpx;">
				<wxy-audio 
					:src="audioSrc"
					:play.sync="audioPlay"
				/>
			</view>
		</u-popup>
		
		<u-popup v-model="videoShow" mode="bottom" @close="videoClose">
			<view style="padding: 30rpx;display: flex;justify-content: center;align-items: center;">
				<video
					class="video"
					id="myVideo"
					
					:src="videoSrc"
					autoplay="true"
				/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import joMarkdown from './components/jo-markdown/decode.vue';
	import markdownFunc from './components/jo-markdown/index.js';
	import { getCourseDetails, getCourseDetailsByFamily } from '@/api/course'
	import appMixin from '@/mixins/app.js'
	import {
		mapState,
	} from 'vuex';
	export default {
		mixins: [appMixin],
		components: {
			joMarkdown
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
			}),
		},
		data() {
			return {
				customStyle: {
					padding: '10rpx 0'
				},
				show: false,
				vendorCourse: null,
				courseContent: [],
				item: {},
				title: '',
				content: null,
				subContent: null,
				
				audioShow: false,
				audioPlay: false,
				audioSrc: '',
				
				videoShow: false,
				videoSrc: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.getCourseDetails()
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			getCourseDetails() {
				let f = getCourseDetails
				if (this.appType === 'app-p' || this.appType === 'mp-p') {
					f = getCourseDetailsByFamily
				}
				f({courseId: this.id}).then(res => {
					this.vendorCourse = res.data.vendorCourse
					this.courseContent = res.data.courseContent
				})
			},
			itemClick(item) {
				console.log(item)
				this.title = item.title
				this.item = item
				this.content = this.formatMarkdown(item.content)
				this.show = true
			},
			
			subItemClick(item) {
				this.subContent = this.formatMarkdown(item.content)
			},
			
			formatMarkdown(markdown) {
				return markdownFunc(markdown, 'markdown');
			},
			
			toolClick(item) {
				console.log(item)
				if (item.type === 'pdf') {
					this.openDocument(item.imgUrl)
				} else if (item.type === 'radio') {
					this.audioSrc = item.imgUrl;
					this.audioShow = true;
					// this.play = true
				} else if (item.type === 'video') {
					this.videoSrc = item.imgUrl;
					this.videoShow = true
				} else if (item.type === 'image') {
					const itemList = [ item.imgUrl ]
					console.log(itemList)
					uni.previewImage({
						urls: itemList,
					});
				}
			},
			
			openDocument(url) {
				uni.showLoading({title: '正在加载文件'})
				uni.downloadFile({//下载对应文件
				  url: url,
				  success: function (res) {
					console.log(res);
					var filePath = res.tempFilePath;//文件路径
					uni.openDocument({
					  filePath: filePath,//装载对应文件的路径
					  success: function (res) {
						console.log("打开成功");
					  },
					  fail: function (res) {
						console.log(res);
					  }
					})
			
				  },
				  fail: function (res) {
					console.log(res);
					this.$u.toast('加载失败')
				  },
				  complete() {
				  	uni.hideLoading()
				  }
				})
			},
			
			audioClose() {
				this.audioPlay = false
			},
			
			videoClose() {
				this.videoContext.stop()
			},
			
			details() {
				return JSON.parse(this.vendorCourse.details)
			},
			
			detailHandle(categoryType) {
				this.$u.route({
					url: '/pages_teach/teach/week-detail-page',
					params: {
						courseId: this.id,
						categoryType
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding: 30rpx;
		
		.title{
			font-size: 40rpx;
			font-weight: bold;
			color: $app-font-color;
			margin-left: 20rpx;
		}
		
		.desc{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			font-size: 26rpx;
			color: $app-font-color;
			margin-top: 20rpx;
			margin-left: 20rpx;
			
			.sub{
				width: 50%;
			}
		}
		

		.item{
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
	
	.popup-content{
		padding: 30rpx;
		
		.content{
			margin-top: 30rpx;
		}
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.tool{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		
		.tool-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.cover{
				height: 100rpx;
				width: 100rpx;
			}
			
			.tool-title{
				margin-top: 10rpx;
				font-size: 20rpx;
				height: 60rpx;
				color: $app-font-desc-color;
			}
		}
	}
	
	.categoryType{
		position: fixed;
		width: 90%;
		bottom: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
